This article details the process of building a React-like library from scratch, providing insights into its internal workings and design decisions. It starts by implementing a core rendering model, including components, virtual DOM, and reconciliation, showing how React constructs and updates the UI. It then goes into the implementation of essential hooks like `useState`, `useRef`, `useEffect`, and `useMemo`. Finally, the article discusses the implementation of `useCallback` and `useContext`, showing off the challenges and solutions involved in managing state and context sharing within a component tree.

This article explains how to create a simple React state management library using the `useSyncExternalStore` hook introduced in React 18. It outlines the key components of the library, including subscribing to state changes, retrieving the current state, and updating the state. The article also compares this approach to using React Context and discusses potential improvements like using reducers and immer for state management.

A guide to building React hooks from scratch to deepen your understanding of how they work.

This article explains how to build a simplified version of React with 400 lines of code. The simplified React utilizes Fiber architecture and concurrency mode to avoid blocking the main thread during rendering. It is able to execute tasks during browser idle time. It uses a linked list structure to connect work units and triggers updates through a custom useState implementation.

An in-depth YouTube tutorial on modern React.

This article presents a way to implement React-like component-based frontend development in Go using the standard library. Its approach defines components using the define function, composes them using templates, and manages state using URL query parameters.

React introduced the concept of a "virtual DOM" to optimize web app rendering. Its popularity led to widespread adoption, but also to criticisms regarding its learning curve, state management, and performance. While React's defenders highlight its improvements in recent versions, alternative frameworks like Svelte and Astro offer simpler approaches without relying on the virtual DOM.

React 19 beta introduces new hooks like useTransition and useActionState to streamline async handling, improve form management, and enable optimistic updates for smoother user experiences. These features reduce unnecessary re-renders, automate state management, and improve UI responsiveness during async operations.

The blog post discusses the concept of component composition in React, emphasizing its significance as a core advantage of the framework. Initially, the author reflects on their early experiences with React, highlighting features like the Virtual DOM, one-way data flow, and JSX. However, they argue that the true strength of React lies in its ability to compose components into more complex structures, a practice that was not widely accepted in software development a decade ago. The author addresses the traditional notion of separation of concerns, suggesting that while it still exists, it has evolved. Instead of separating styles, logic, and markup into distinct layers, React encourages grouping them together within components, leading to better code cohesion. This shift allows developers to think in terms of components, which can enhance the organization and maintainability of code. The discussion then shifts to conditional rendering, a common practice in React where components are rendered based on certain conditions. The author presents an example of a `ShoppingList` component that conditionally renders user information and items based on the presence of data. While this approach is acceptable for simple cases, the author warns that it can become problematic when managing multiple states within a single component. As the complexity of the component increases, the author illustrates how conditional rendering can lead to a convoluted structure that is difficult to read and maintain. They propose breaking down the component into smaller, more manageable pieces, suggesting the use of a layout component to encapsulate shared elements while allowing for dynamic content based on the component's state. The author advocates for using early returns to handle different states of a component more clearly. By returning early for each state (e.g., loading, no data, or displaying data), the code becomes easier to follow and reduces cognitive load. This method also facilitates the addition of new conditions, such as error handling, without complicating the existing logic. The post concludes by emphasizing the importance of component composition and the need to avoid excessive conditional rendering. The author encourages developers to embrace early returns and to continually reassess their component structures to ensure clarity and maintainability. They invite readers to engage with them for further discussion or questions, reinforcing the community aspect of learning and sharing knowledge in the React ecosystem.

Many developers work professionally with React for years without understanding how its re-rendering process works. This tutorial helps readers build a mental model for when and why React re-renders and how to tell why a specific component re-rendered. Knowing how React's render cycle works can help developers understand when to use React.memo and when to wrap functions in useCallback.

Meta’s react-strict-dom (open sourced last week) is an experimental integration of React DOM and StyleX that standardizes the development of styled React components, both web and native. This article goes into the historical background of building a universal codebase that shares components between Web and Native and how react-strict-dom changes the way we can do it. You might need to refresh the page to get it to load!

React 19 introduces major updates like Server Components, improving performance by rendering on the server and reducing client-side JavaScript. New features include Actions for handling events and enhanced hooks like useActionState for managing form states, streamlining both server and client workflows.

This is a practical guide to refactoring a messy React component through gradual improvements. First, one should make sure that tests are written so that no functional changes occur during refactoring. Then, linting rules should be used to prevent future code duplication and dead code. The guide highlights several key areas for refactoring, including splitting components based on responsibilities and extracting utility functions to improve code organization and maintainability.

Since its introduction in 2013, React has evolved significantly, leading to the emergence of various component types. This evolution has resulted in some components becoming essential for modern applications, while others have fallen out of favor or been deprecated. This guide aims to provide beginners with a comprehensive understanding of the different types of React components, highlighting both legacy and modern patterns. Initially, React relied on the `createClass` method for defining components, which allowed developers to create class components without using JavaScript classes. This method was prevalent before the introduction of ES6 in 2015, which brought native class syntax to JavaScript. The `createClass` method enabled developers to define component state and lifecycle methods, although it has since been deprecated and is no longer part of the React core package. Another early pattern was React Mixins, which allowed for the extraction of reusable logic from components. Mixins could encapsulate functionality and be included in components, but they have also been deprecated due to their drawbacks, such as potential naming conflicts and difficulties in tracking the source of methods. With the release of React 0.13, Class Components became the standard for defining components, utilizing ES6 class syntax. Class Components introduced lifecycle methods and allowed for more structured component logic. However, with the introduction of React Hooks in version 16.8, Function Components gained the ability to manage state and side effects, making them the preferred choice for modern React development. Higher-Order Components (HOCs) were another advanced pattern that allowed for the reuse of component logic by wrapping components with additional functionality. However, like Mixins and Class Components, HOCs have seen a decline in usage as developers increasingly favor Function Components with Hooks for sharing logic. Function Components, which were once limited to stateless behavior, have transformed with the introduction of Hooks. They now allow developers to manage state and side effects, making them the industry standard. Custom Hooks can also be created to encapsulate and share logic across components, providing a more modular approach compared to previous patterns. The latest addition to React is Server Components, which enable components to be executed on the server. This approach allows for the delivery of only HTML to the client, optimizing performance and enabling access to server-side resources. Server Components differ from traditional Client Components, which run in the browser and can utilize JavaScript and React Hooks. Async Components are currently supported for Server Components, allowing for asynchronous operations like data fetching before rendering. This capability is expected to extend to Client Components in the future, further enhancing the flexibility of React. Overall, this guide has explored the various types of React components, their historical context, and their relevance in modern development. Understanding these components is crucial for developers looking to build efficient and maintainable React applications.

This article introduces three key rules to manage React side effects properly: keep side effects out of the render process, place side effects triggered by events in event handlers, and use useEffect to handle side effects that synchronize with external systems.

This article explains how React compiler works, specifically how it applies memoization techniques for efficiency on functions and hooks. The compilation involves traversing nodes, compiling functions, and replacing original functions with optimized versions. If memoization is applied, the compiler adds an import for `useMemoCache`. The article details the compiler's operation from entry through Babel to function transformation.

A UI kit for building performant 3D user interfaces for Three.js in React with support for nested scrolling, buttons, inputs, dropdowns, tabs, checkboxes, and more.

React Native Reanimated 3 is a comprehensive low-level abstraction for the React Native Animated library API.

React 19 introduces several significant improvements designed to streamline development and boost application performance. Key features include a performance-enhancing compiler, simplified form handling with Actions, server-side rendering optimizations with Server Components, and better integration with Web Components. The update promises faster rendering, smoother user experiences, and easier development workflows.

MobX, a React state management library, automatically tracks dependencies and memoizes components. The upcoming React Compiler is meant to auto-memoize components, but MobX already does this more efficiently with less memory.

A new official React doc that explains how to animate a progress element using the new useTransition hook, which lets you update state without blocking UI.

React hooks have become an integral part of modern React development, yet there are nuances and unspoken rules that can complicate their use. Tom MacWright shares his insights on these complexities, particularly focusing on the useEffect hook and its dependency management. One of the primary rules regarding useEffect is that the dependency array should include all variables referenced within the callback function. For instance, if a developer uses a state variable like `x` in a useEffect without including it in the dependency array, it can lead to unexpected behavior. The correct implementation would ensure that `x` is included in the dependencies, thus allowing React to track changes to that variable effectively. However, not all values need to be included in the dependency array. Some values are considered "known to be stable," meaning they do not change between renders. Examples of these stable values include state setters from useState, dispatchers from useReducer, refs from useRef, and certain return values from hooks like useEffectEvent. These stable references do not need to be added to the dependencies array, which can simplify the management of effects. MacWright expresses frustration with the lack of clarity in React's documentation regarding the stability of these values. The reliance on object identity and stability can lead to confusion, especially for developers who may not be aware of the implications of including unstable references in the dependency array. This can result in effects running more frequently than intended, which can degrade performance and lead to bugs. The documentation does touch on some aspects of stability, but it is often scattered across different sections rather than being consolidated in the API documentation for each hook. This can make it challenging for developers to ascertain whether the return values from third-party hooks, such as those from libraries like Jotai or tanstack-query, are stable. The uncertainty surrounding these third-party hooks adds another layer of complexity to dependency management in React. Despite these challenges, MacWright notes that including stable values in the dependency array is not detrimental; it simply means that the effect will not trigger unnecessarily. However, he advocates for clearer documentation and better tools to help developers understand which values are stable and which are not. This would enhance the overall experience of working with React hooks and improve the reliability of applications built with them.

React Query is both a data fetcher and an asynchronous state manager designed for handling server state. Unlike client state (managed with useState or useReducer), server state is often asynchronous, persistent, and can be modified by multiple users. React Query abstracts common complexities like cache management, invalidation, and refetching, allowing developers to focus on building their applications without getting bogged down in the complex, nitty-gritty details of data fetching.

With the addition of Server Components and Server Actions, React is evolving into a full-stack framework.

Flow, a type checker for JavaScript, now offers dedicated syntax for React components and hooks to improve the developer experience. It now replaces traditional React function syntax with component syntax and enforces React best practices, like making props read-only. It also supports hooks and their corresponding rules.

The React 19 Beta is now available on npm. The update includes new hooks, new APIS, and support for using async functions in transitions to handle pending states, errors, forms, and optimistic updates automatically. There are breaking changes, but they should not impact most apps. This article details the new features in the beta.

This is a thorough comparison of the template languages used by React, Vue, Angular, and Svelte. It looks at how the frameworks define and use components, event handling, and more advanced techniques like slotting. While all four frameworks can do everything that was tested, React still feels most natural to the author.

WebJSX is a library designed for building web applications using JSX and Web Components, emphasizing simplicity and efficiency. It provides two primary functions: `createElement`, which allows developers to create virtual DOM elements using JSX syntax, and `applyDiff`, which efficiently updates the real DOM by comparing virtual nodes. The library supports a straightforward installation process via npm, enabling developers to quickly integrate it into their projects. It fully embraces JSX syntax, allowing for the creation of virtual DOM elements and the updating of the real DOM seamlessly. For instance, a simple virtual DOM can be defined using JSX, and the `applyDiff` function can be used to render it in the actual DOM. WebJSX also facilitates the creation of custom Web Components. Developers can define custom elements by extending the `HTMLElement` class and implementing lifecycle methods such as `connectedCallback` and `attributeChangedCallback`. This allows for dynamic rendering based on attribute changes, with the ability to use JSX within the custom elements. Event handling is made easy with JSX, allowing developers to attach event listeners directly within their markup. Additionally, the library supports fragments, enabling the grouping of multiple elements without adding extra nodes to the DOM. The API includes methods for creating virtual DOM elements, applying differences to the DOM, and handling fragments. There are also advanced features like rendering suspension, which allows for batching property updates to minimize re-renders. For TypeScript users, WebJSX provides configuration options to handle JSX properly, and developers can declare custom elements to avoid TypeScript errors related to unknown HTML tags. WebJSX can be bundled with various tools, but it also supports direct module loading in web pages, making it flexible for different development environments. The library encourages community contributions, welcoming bug reports, feature suggestions, and pull requests. Overall, WebJSX is an open-source project licensed under the MIT license, aimed at simplifying the development of web applications with modern web standards.

Legend State is a React state management library optimized for offline-first persistence. Expo is a React Native mobile app development framework. Offline-first applications have challenges like conflict resolution to deal with. This tutorial walks readers through how to deal with offline sync, offline conflicts, real-time collaboration, and other common offline-first challenges.

React 19 has features like Server Components and Server Actions, which optimize performance and simplify data handling by shifting more logic to the server. Server Actions make API endpoint creation and form handling easier by automatically managing pending UI states, error handling, and optimistic UI updates.